<template>
	<view class="">
		<view class="nav_top-bg">
			<u-navbar title="我的收藏">
				<view class="u-nav-slot" slot="left">
					<u-icon name="arrow-left" @click="go_black" size="19"></u-icon>
					<u-line direction="column" :hairline="false" length="16" margin="0 10px"></u-line>
					<u-icon name="home" @click="goHome" size="20"></u-icon>
				</view>
			</u-navbar>
		</view>
		<!-- 顶部筛选tab -->
		<view class="tabs_change d-flex align-items">
			<view class="jf-w" :current="current_jf" @click="chage_tabs(jianfang)"
				v-for="(jianfang,index) in jianfang_lists" :key="index">
				<view :class="current_jf == jianfang.id ? 'jf-w-t-xz' : 'jf-w-t'">{{jianfang.tabs_name}}</view>
				<view :class="current_jf == jianfang.id ? 'line' : ''"></view>
			</view>
		</view>
		<!-- 店铺收藏列表 -->
		<view class="" v-if="current_jf == 1">
			<!-- tabs筛选 -->
			<view class="">
				<view class="tabslist" v-if="dianpu_list.length > 0">
					<view class="anliList">
						<u-tabs :list="dianpu_list" :current="current_dp" lineWidth="48rpx" lineColor="#FF6400"
							:activeStyle="{
				    color: '#FF6400',
				    fontWeight: 'bold',
				    transform: 'scale(1.05)'
				}" @click="dianpu_click"></u-tabs>
					</view>
				</view>
				<view class="" style="margin-top: 100rpx;" v-else>
					<u-empty>
					</u-empty>
				</view>
			</view>
			
			<!-- 主体建房/旧房改造 店铺列表 -->
			<view class="" v-if="dianpu_list[current_dp].id == 7 || dianpu_list[current_dp].id == 8">
				<view class="scroll-view-item_H" @click="go_jianfang(company)" v-for="(company,index) in companyLists"
					:key="index">
					<view class="d-flex gs-list">
						<view class="">
							<image class="touxiang-img" v-if="company.avatar_url" :src="company.avatar_url" mode=""></image>
							<image class="touxiang-img" v-else src="/static/my/moren.png" mode=""></image>
						</view>
						<view class="">
							<view class="name-t">{{company.company_name}}</view>
							<view class="company-t d-flex align-items" v-if="company.company_cityname">
								<image class="dwImg" src="../../static/jianfang/dw.png" mode="widthFix"></image>
								{{company.company_cityname}} {{company.company_areaname}}
							</view>
						</view>
					</view>
					<view class="geyan">{{company.company_jieshao}}</view>
				</view>
			</view>
			<!-- 施工队店铺收藏 -->
			<view class="" v-if="dianpu_list[current_dp].id == 2">
				<view class="scroll-view-item_H" @click="shigongdui_index(company)"
					v-for="(company,index) in companyLists" :key="index">
					<view class="d-flex gs-list">
						<view class="">
							<image class="touxiang-img" v-if="company.shigong_pic_first" :src="company.shigong_pic_first" mode=""></image>
							<image class="touxiang-img" v-else src="/static/my/moren.png" mode=""></image>
						</view>
						<view class="">
							<view class="name-t">{{company.shigong_contact}}</view>
							<view class="company-t d-flex align-items">
								<image class="dwImg" src="../../static/jianfang/dw.png" mode="widthFix"></image>
								{{company.shigong_cityname}} {{company.shigong_areaname}}
							</view>
						</view>
					</view>
					<view class="geyan">{{company.instr}}</view>
				</view>
			</view>
			<!-- 家装公司店铺收藏 -->
			<view class="" v-if="dianpu_list[current_dp].id == 6">
				<view class="scroll-view-item_H" @click="jiazhuang_index(company)"
					v-for="(company,index) in companyLists" :key="index">
					<view class="d-flex gs-list">
						<view class="">
							<image class="touxiang-img" v-if="company.user.avatar" :src="company.user.avatar" mode=""></image>
							<image class="touxiang-img" v-else src="/static/my/moren.png" mode=""></image>
						</view>
						<view class="">
							<view class="name-t">{{company.company_name}}</view>
							<view class="company-t d-flex align-items">
								<image class="dwImg" src="../../static/jianfang/dw.png" mode="widthFix"></image>
								{{company.company_cityname}} {{company.company_areaname}}
							</view>
						</view>
					</view>
					<view class="geyan">{{company.company_jieshao}}</view>
				</view>
			</view>
			<!-- 设计师店铺收藏 -->
			<view class="" v-if="dianpu_list[current_dp].id == 3">
				<view class="scroll-view-item_H" @click="shejishi_index(company)"
					v-for="(company,index) in companyLists" :key="index">
					<view class="d-flex gs-list">
						<view class="">
							<image class="touxiang-img" v-if="company.user.avatar" :src="company.user.avatar" mode=""></image>
							<image class="touxiang-img" v-else src="/static/my/moren.png" mode=""></image>
						</view>
						<view class="">
							<view class="name-t">{{company.company_contact}}</view>
							<view class="company-t d-flex align-items">
								<image class="dwImg" src="../../static/jianfang/dw.png" mode="widthFix"></image>
								{{company.company_cityname}} {{company.company_areaname}}
							</view>
						</view>
					</view>
					<view class="geyan">{{company.instr}}</view>
				</view>
			</view>
			<!-- 材料商店铺收藏 -->
			<view class="" v-if="dianpu_list[current_dp].id == 4">
				<view class="scroll-view-item_H" @click="cailiaoshang_index(company)"
					v-for="(company,index) in companyLists" :key="index">
					<view class="d-flex gs-list">
						<view class="">
							<image class="touxiang-img" v-if="company.user.avatar" :src="company.user.avatar" mode=""></image>
							<image class="touxiang-img" v-else src="/static/my/moren.png" mode=""></image>
						</view>
						<view class="">
							<view class="name-t">{{company.company_name}}</view>
							<view class="company-t d-flex align-items" v-if="company.company_cityname">
								<image class="dwImg" src="../../static/jianfang/dw.png" mode="widthFix"></image>
								{{company.company_cityname}} {{company.company_areaname}}
							</view>
						</view>
					</view>
					<view class="geyan">{{company.instr}}</view>
				</view>
			</view>
			<!-- 雇主店铺收藏 -->
			<view class="" v-if="dianpu_list[current_dp].id == 1">
				<view class="scroll-view-item_H" @click="guzhu_index(company)" v-for="(company,index) in companyLists"
					:key="index">
					<view class="d-flex gs-list">
						<view class="">
							<image class="touxiang-img" v-if="company.user.avatar" :src="company.user.avatar" mode=""></image>
							<image class="touxiang-img" v-else src="/static/my/moren.png" mode=""></image>
						</view>
						<view class="">
							<view class="name-t">{{company.name}}</view>
							<view class="company-t d-flex align-items">
								<image class="dwImg" src="../../static/jianfang/dw.png" mode="widthFix"></image>
								{{company.cityname}} {{company.areaname}}
							</view>
						</view>
					</view>
					<view class="geyan">{{company.instr}}</view>
				</view>
			</view>
		</view>
		<!-- 信息收藏列表 -->
		<view class="" v-if="current_jf == 2">
			<!-- tabs筛选 -->
			<view class="tabslist" v-if="anli_list.length > 0">
				<view class="anliList">
					<u-tabs :list="anli_list" :current="current" lineWidth="48rpx" lineColor="#FF6400" :activeStyle="{
			    color: '#FF6400',
			    fontWeight: 'bold',
			    transform: 'scale(1.05)'
			}" @click="anli_click"></u-tabs>
				</view>
			</view>
			<view class="" style="margin-top: 100rpx;" v-else>
				<u-empty>
				</u-empty>
			</view>
			<!-- 收藏的产品信息 -->
			<view class="fengge-list" v-if="anli_list[current].id == 11">
				<view class="shopping d-flex align-items justify-content-space-between">
					<view class="shopping_list" @click="pro_info(chanpin)" v-for="(chanpin,index) in chanpin_list"
						:key="index">
						<image class="shopping_phone" :src="chanpin.product_images_first" mode="widthFix"></image>
						<view class="">
							<view class="sp-name">{{chanpin.product_name}}</view>
							<view class="sp-num"> <text class="fuhao">￥</text> {{chanpin.price}}</view>
						</view>
					</view>
				</view>
			</view>
			<!-- 免费图纸信息 -->
			<view class="" v-if="anli_list[current].id == 9">
				<view class="w-690">
					<view class="">
						<view class="choose-fengge margin-top-30" @click="tuzhi_info(chanpin)"
							v-for="(chanpin,index) in chanpin_list" :key="index">
							<image :src="chanpin.pingmian_images_first" mode="widthFix" class="fenggeImg"></image>
							<view class="fengge-t">{{chanpin.content2.title}}</view>
							<view class="type-list d-flex align-items flex-wrap">
								<view class="type-list-m" v-if="chanpin.mianji">{{chanpin.mianji}}m²</view>
								<view class="type-list-m" v-if="chanpin.jinshen">长{{chanpin.jinshen}}m</view>
								<view class="type-list-m" v-if="chanpin.miankuan">宽{{chanpin.miankuan}}m</view>
								<view class="type-list-m" v-if="chanpin.zaojia">{{chanpin.zaojia}}万</view>
								<view class="type-list-m" v-if="chanpin.fenggename">{{chanpin.fenggename}}</view>
								<view class="type-list-m" v-if="chanpin.huxingname">{{chanpin.huxingname}}</view>
								<view class="type-list-m" v-if="chanpin.jiegouname">{{chanpin.jiegouname}}</view>
							</view>
						</view>
					</view>
				</view>
			</view>
			<!-- 设计师 -->
			<view class="" v-if="anli_list[current].id == 8">
				<view class="shigong_company" v-for="(chanpin,index) in chanpin_list" :key="index">
					<view class="w-650">
						<view class="d-flex align-items justify-content-space-between">
							<view class="d-flex align-items">
								<image class="touxiang-img" :src="chanpin.user.avatar" mode="widthFix"></image>
								<view class="">
									<view class="name-t">{{chanpin.userinfo.company_contact}}</view>
									<view class="shejishi_gs" v-if="chanpin.userinfo.company_name">
										{{chanpin.userinfo.company_name}}</view>
								</view>
							</view>
							<view class="company-t d-flex align-items">
								<image class="dwImg" src="../../static/jianfang/dw.png" mode="widthFix"></image>
								{{chanpin.cityname}}·{{chanpin.areaname}}
							</view>
						</view>
						<view class="shejishi_ms">{{chanpin.userinfo.instr}}</view>
						<view class="see_anli" @click="all_anli(chanpin)">点击查看全部案例 >></view>
					</view>
				</view>
			</view>
			<!-- 收藏的材料信息 -->
			<view class="fengge-list" v-if="anli_list[current].id == 10">
				<view class="shopping d-flex align-items justify-content-space-between">
					<view class="shopping_list" @click="cailiao_info(chanpin)" v-for="(chanpin,index) in chanpin_list"
						:key="index">
						<image class="shopping_phone" :src="chanpin.zhutu_images_firsturl" mode="widthFix"></image>
						<view class="">
							<view class="sp-name">{{chanpin.content2.title}}</view>
							<view class="sp-num"> <text class="fuhao">￥</text> {{chanpin.price}}</view>
						</view>
					</view>
				</view>
			</view>

		</view>
	</view>
</template>

<script>
	import {
		getShouchangShopList,
		getShoucangDianInfotype,
		getShouchangList,
		getShoucangInfotype
	} from '@/api/user.js'
	export default {
		data() {
			return {
				current_jf: 1,
				jianfang_lists: [{
					tabs_name: '店铺收藏',
					id: 1
				}, {
					tabs_name: '信息收藏',
					id: 2
				}],
				companyLists: [],
				page: 1,
				limit: 7,
				current: 0,
				anli_list: [],
				current_dp: 0,
				dianpu_list: [],
				chanpin_list: [], //产品信息数组
			}
		},
		async onLoad() {
			await this.get_leibie()
			await this.get_info_list()
			await this.get_dianpu_list()
			await this.get_info_leibie()
		},
		onShow() {
			
		},
		methods: {
			go_black() {
				uni.navigateBack({
					delta: 1
				})
			},
			async chage_tabs(e) {
				console.log("获取收藏列表", e);
				this.current_jf = e.id
				this.current_dp = 0
				this.current = 0
				await this.get_leibie()
				await this.get_info_leibie()
				 this.get_dianpu_list()
				this.get_info_list() //信息收藏列表
			},
			goHome() {
				uni.switchTab({
					url: '/pages/index/index'
				})
			},
			// 查看全部案例
			all_anli(e) {
				uni.navigateTo({
					url: '/pagesA/anli_zhanshi/shejishi_detail?group_id=' + e.group_id + '&user_id=' + e.user_id
				})
			},
			// 免费图纸
			go_detail(fengGe) {
				uni.navigateTo({
					url: '/pagesA/index_top/tuzhi_detail'
				})
			},
			// 信息收藏切換按鈕
			anli_click(item) {
				console.log('item', item);
				this.current = item.index
				this.get_info_list()
			},
			// 点击切换店铺收藏列表下面的导航
			dianpu_click(item) {
				console.log('item', item);
				this.current_dp = item.index
				this.get_dianpu_list()
			},
			// 获取收藏店铺类别
			async get_leibie() {
				await getShoucangDianInfotype({}).then(res => {
					console.log("获取收藏店铺类别", res);
					if (res.code == 1) {
						this.dianpu_list = res.data.usergrouplist
					}
				})
			},
			// 获取店铺收藏列表
			get_dianpu_list() {
				var data = {
					page:1,
					limit:7,
					group_id: this.dianpu_list[this.current_dp] ? this.dianpu_list[this.current_dp].id : ''
				}
				getShouchangShopList(data).then(res => {
					console.log("获取店铺列表", res);
					if (res.code == 1) {
						if (this.page == 1) {
							this.companyLists = res.data.list
						} else {
							this.companyLists = this.companyLists.concat(res.data.list)
						}
						uni.stopPullDownRefresh()
					}
				})
			},
			// 获取信息收藏类别
			async get_info_leibie() {
				await getShoucangInfotype({}).then(res => {
					console.log("获取收藏店铺类别", res);
					if (res.code == 1) {
						this.anli_list = res.data.infotypelist
					}
				})
			},
			// 获取信息收藏列表
			async get_info_list() {
				var data = {
					page:1,
					limit:7,
					infotype: this.anli_list[this.current] ? this.anli_list[this.current].id :''
				}
				await getShouchangList(data).then(res => {
					console.log("获取店铺列表", res);
					if (res.code == 1) {
						if (this.page == 1) {
							this.chanpin_list = res.data.list
						} else {
							this.chanpin_list = this.chanpin_list.concat(res.data.list)
						}
						uni.stopPullDownRefresh()
					}
				})
			},
			// 跳转到主体建房店铺
			go_jianfang(e) {
				uni.navigateTo({
					url: '/pagesA/index_top/jianfang_detail?id=' + e.group_id + '&user_id=' + e.user_id
				})
			},
			// 跳转到雇主店铺
			guzhu_index(e) {
				uni.navigateTo({
					url: '/pagesA/anli_zhanshi/guzhu_detail?group_id=' + e.group_id + '&user_id=' + e.user_id
				})
			},
			// 跳转到施工队店铺
			shigongdui_index(e) {
				uni.navigateTo({
					url: '/pagesA/index_top/shigongdui_detail?id=' + e.group_id + '&user_id=' + e.user_id
				})
			},
			// 跳转到材料商店铺
			cailiaoshang_index(e) {
				uni.navigateTo({
					url: '/pagesA/index_top/cailiaoshang_detail?id=' + e.group_id + '&user_id=' + e.user_id
				})
			},

			// 跳转到设计师店铺
			shejishi_index(e) {
				uni.navigateTo({
					url: '/pagesA/anli_zhanshi/shejishi_detail?group_id=' + e.group_id + '&user_id=' + e.user_id
				})
			},
			// 跳转到家装公司店铺
			jiazhuang_index(e) {
				uni.navigateTo({
					url: '/pagesA/index_top/jianfang_detail?id=' + e.group_id + '&user_id=' + e.user_id
				})
			},
			cailiao_info(e) {
				uni.navigateTo({
					url: '/pagesA/anli_zhanshi/shopping?id=' + e.content_id + '&infotype_id=' + e.infotype_id
				})
			},
			tuzhi_info(e) {
				uni.navigateTo({
					url: '/pagesA/index_top/tuzhi_detail?content_id=' + e.content_id
				})
			},
			pro_info(e) {
				uni.navigateTo({
					url: '/pagesA/anli_zhanshi/shopping?id=' + e.content_id
				})
			},
		}
	}
</script>

<style>
	.geyan {
		width: 640rpx;
		font-size: 24rpx;
		font-weight: 500;
		line-height: 42rpx;
		color: #333333;
		margin: auto;
		margin-top: 25rpx;
		overflow: hidden;
		display: -webkit-box;
		text-overflow: ellipsis;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
		white-space: normal;
	}

	.gs-list {
		width: 640rpx;
		margin: auto;
		padding-top: 30rpx;
	}

	.scroll-view-item_H {
		width: 690rpx;
		height: 250rpx;
		border-radius: 10rpx;
		background: #fff;
		margin: 20rpx auto;
	}

	.line {
		width: 48rpx;
		height: 4rpx;
		margin: auto;
		margin-top: 0rpx;
		background: #FF6400;
	}

	.jf-w-t-xz {
		font-size: 32rpx;
		font-weight: 600;
		text-align: center;
		color: #FF6400;
	}

	.jf-w-t {
		font-size: 32rpx;
		font-weight: normal;
		text-align: center;
		color: #1D2129;
	}

	.jf-w {
		width: 50%;
		text-align: center;
		line-height: 80rpx;
		padding-top: 20rpx;
	}

	.tabs_change {
		width: 750rpx;
		height: 102rpx;
		background-color: #fff;
		margin-top: 2rpx;
	}


	.type-list {
		margin-left: 20rpx;
		padding-bottom: 20rpx;
	}

	.type-list-m {
		padding: 7rpx 15rpx;
		font-size: 20rpx;
		color: #FF4D4F;
		border-radius: 4.5px;
		background: #FDF2F2;
		margin-right: 10rpx;
		margin-bottom: 10rpx;
	}

	.fengge-t {
		font-size: 30rpx;
		font-weight: 700;
		line-height: 50rpx;
		color: #333333;
		margin: 27rpx 0 10rpx 20rpx;
	}

	.fenggeImg {
		width: 690rpx;
		display: block;
	}

	.choose-fengge {
		width: 690rpx;
		background-color: #fff;
		border-radius: 10rpx;
		margin-bottom: 25rpx;
	}

	.see_anli {
		font-size: 24rpx;
		font-weight: normal;
		margin-top: 20rpx;
		color: #2B2B2B;
	}

	.shejishi_gs {
		font-size: 24rpx;
		font-weight: normal;
		color: #999999;
		margin-top: 5rpx;
	}

	.shejishi_ms {
		height: 112rpx;
		border-bottom: 1px solid #E9E9E9;
		font-size: 24rpx;
		font-weight: normal;
		line-height: 42rpx;
		color: #666;
		margin-top: 20rpx;
	}

	.zhuying {
		font-size: 24rpx;
		font-weight: normal;
		line-height: 42rpx;
		color: #4D5150;
		margin-top: 20rpx;
	}

	.cls {
		width: 520rpx;
	}

	.type-list-m1 {
		padding: 7rpx 15rpx;
		font-size: 20rpx;
		color: #FF4D4F;
		border-radius: 4.5px;
		background: #FDF2F2;
		margin-right: 10rpx;
	}

	.dwImg {
		width: 32rpx;
		display: block;
	}

	.company-t {
		font-size: 24rpx;
		color: #999999;
		margin-top: 10rpx;
	}

	.name-t {
		font-size: 30rpx;
		font-weight: 600;
		color: #1C2023;
		margin-bottom: 10rpx;
	}

	.touxiang-img {
		width: 90rpx;
		height: 90rpx;
		border-radius: 50%;
		display: block;
		margin-right: 20rpx;
	}

	.shigong_company {
		width: 690rpx;
		margin: auto;
		margin-top: 30rpx;
		background-color: #fff;
		border-radius: 10rpx;
		padding: 30rpx 0;
	}

	.tabslist {
		width: 750rpx;
		background-color: #fff;
		height: 84rpx;
		margin-top: 10rpx;
	}

	.fuhao {
		font-size: 24rpx;
		font-weight: 600;
		color: #FF4D4F;
	}

	.sp-num {
		font-size: 36rpx;
		font-weight: 600;
		color: #FF4D4F;
		margin: 0rpx 0 15rpx 24rpx;
	}

	.sp-name {
		width: 295rpx;
		font-size: 30rpx;
		color: #333;
		font-weight: 600;
		margin-left: 20rpx;
		margin-top: 20rpx;
		overflow: hidden;
		display: -webkit-box;
		text-overflow: ellipsis;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
	}

	.shopping_phone {
		width: 335rpx;
		display: block;
		border-top-right-radius: 8rpx;
		border-top-left-radius: 8rpx;
	}

	.shopping_list {
		width: 335rpx;
		background-color: #fff;
		border-radius: 8rpx;
	}

	.shopping {
		width: 690rpx;
		margin: 30rpx auto;
		flex-wrap: wrap;
	}

	.fengge-list {
		padding-bottom: 200rpx;
	}

	page {
		background-color: #F7F8FB;
	}
</style>